<include file="layout/header" />
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

	<div id="content">

		<!-- widget grid -->
		<section id="widget-grid" class="">
		
			<!-- row -->
			<div class="row">
		
				<!-- NEW WIDGET START -->
				<article class="col-sm-12 col-md-12 col-lg-12">
		
					<!-- Widget ID (each widget will need unique ID)-->
					<div class="jarviswidget jarviswidget-color-orange" id="wid-id-0" data-widget-editbutton="false">
					
						<header>
							<span class="widget-icon"> <i class="fa fa-lg fa-calendar"></i> </span>
							<h2> 人员树 </h2>
		
						</header>
		
						<!-- widget div-->
						<div>
		
							<!-- widget edit box -->
							<div class="jarviswidget-editbox">
								<!-- This area used as dropdown edit box -->
		
							</div>
							<!-- end widget edit box -->
		
							<!-- widget content -->
							<div class="widget-body">
								
								<div class="row">

									<div class="col-sm-6">
									  	<div class="tree smart-form">
									  		<ul v-for="v in tree">
												<tree :model="v"></tree>
									  		</ul>
										</div>
									</div>

								</div>
		
							</div>
							<!-- end widget content -->
		
						</div>
						<!-- end widget div -->
		
					</div>
					<!-- end widget -->
		
				</article>
				<!-- WIDGET END -->
		
			</div>
		
			<!-- end row -->
		
			<!-- row -->
		
			<div class="row">
		
			</div>
		
			<!-- end row -->
		
		</section>
		<!-- end widget grid -->


		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="myModalLabel">编辑身份角色</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<input type="hidden" name="nid">
							<input type="hidden" name="pid">
							<fieldset>
								<div class="form-group">
									<label class="col-md-2 control-label">名称</label>
									<div class="col-md-10">
										<input class="form-control" type="text" name="name">
									</div>
								</div>

								<div class="form-group">
									<label class="col-md-2 control-label">排序</label>
									<div class="col-md-10">
										<input class="form-control" type="text" name="sort">
									</div>
								</div>

								<div class="form-group">
									<label class="col-md-2 control-label">描述</label>
									<div class="col-md-10">
										<textarea class="form-control" rows="4" id="remark"></textarea>
									</div>
								</div>

								<div class="form-group">
									<label class="col-md-2 control-label">状态</label>
									<div class="col-md-10">
										<label class="radio radio-inline">
											<input type="radio" name="is_del" value="0">
											启用 </label>
										<label class="radio radio-inline">
											<input type="radio" name="is_del" value="1">
											禁用 </label>
									</div>
								</div>

							</fieldset>
						</form>
		
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" id="save">
							保存
						</button>
					</div>
				</div>
			</div>
		</div>


	</div>

	<!-- 树状图 -->
	<template id="tree">
		<li v-show="model.name.length > 0">
			<span style="cursor:pointer;" 
				@click="toggle"
				@dblclick="addChild(model.id)">
				<i v-if="isFolder" class="fa fa-lg" :class="open ? 'fa-minus-circle' : 'fa-plus-circle'"></i> {{model.name}}
			</span>
			<a href="javascript:void(0)" v-show="sign" @click="edit(model)"><i class="pull-right fa fa-edit"></i></a>

			<transition name="fade">
				<ul v-show="open" v-if="isFolder">
					<tree v-for="model in model.children" :model="model"></tree>
					<li><span class="btn btn-warning btn-xs" @click="add(model.id)"><i class="fa fa-plus"></i>新增</span></li>
				</ul>
			</transition>
		</li>
	</template>


<include file="layout/footer" />
<script src="__JS__/manage/role/role.js"></script>
<script>
	vm.tree = {{$roles}};

	$('#save').click(function () {
		var node = {};
		node.id = $('input[name=nid]').val();
		node.pid = $('input[name=pid]').val();
		node.name = $('input[name=name]').val();
		node.sort = $('input[name=sort]').val();
		node.remark = $('#remark').val();
		node.is_del = $('input[name=is_del]:checked').val();
		
		$.post('edit', node, function (res) {
			if (res.status) {
				$('#myModal').modal('hide');
				location.reload();
			}
		}, 'json');
	});
</script>